<template>
  <div class="method">
    <div class="header">
        <i class="iconfont icon-qianjin-copy" @click="iconClick"></i>
        取现纪录
       <div class="right" @click="getMoney">我要取现</div>
    </div>
    <div class="method-content" v-infinite-scroll="loadMore"
      :infinite-scroll-disabled="loading" infinite-scroll-immediate-check="true"
      infinite-scroll-distance="10">

      <!-- 没有列表 -->
      <div class="hasNoList" v-if="methodList.length==0">
        <img src="../../../../assets/enchash/norepay.png">
        <p>暂无取现记录</p>
      </div>
      <!-- 有列表 -->
      <div class="method-content-item" v-else-if="methodList.length!=0" v-for="(item,index) in methodList" 
         @click="goDetail(item.order_no)" :key="index">
        <div class="method-content-item-top">
           <div class="method-content-item-top-id">订单号：{{item.order_no}}</div>
           <div class="method-content-item-bottom-time">{{item.create_time}}</div>
        </div>
        <div class="method-content-item-bottom">
          <div class="method-content-item-bottom-money">{{item.borrow_amount}}</div>
           <div class="method-content-item-top-status">
              <div v-if="item.status_id=='1'">等待交易</div>
              <div v-else-if="item.status_id=='2' ||item.status_id=='4' ||item.status_id=='5'">交易中</div>
              <div v-else-if="item.status_id=='3' ||item.status_id=='6'">交易失败</div>
              <div v-else-if="item.status_id=='7'">交易成功</div>
          </div>
        </div>
      </div> 
      <div v-if="loading">
        <load-more tip="正在加载"></load-more>
        <!-- <load-more :show-loading="false" tip="没有更多了" background-color="#fbf9fe"></load-more> -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from '@/components/Header';
import { InfiniteScroll,MessageBox } from 'mint-ui';
import { cookie, dateFormat,LoadMore } from 'vux'

export default {
  name: 'method',
  components: { Top,LoadMore },
  data() {
    return {
      methodList: [],
      loading:false,
      noneMore:false,
      pageNum:1,
      headTitle: ''
    }
  },
  mounted() {
    let vm = this,
    pageNum = this.pageNum;
    // 查询取现记录
    vm.getList(pageNum,(res)=>{
      var resBody = res.body;
      if(resBody.code=='000'){
        vm.pageNum = pageNum + 1;
        vm.methodList = vm.methodList.concat(resBody.data);
        vm.methodList.forEach(function(item, index) {
            item.create_time = dateFormat(item.create_time, 'YYYY-MM-DD')
        })
      }else if(resBody.code == '444'){
          vm.$router.push({path:'/login',query:{history:1}});
      }else{
        if(resBody.mesg){
          MessageBox.alert(resBody.mesg, '提示');
        }
      }
    })
    
  },
  methods: {
    rollDown(){
    },
    loadMore(){
      let vm = this,
      loading = this.loading,
      noneMore = this.noneMore,
      pageNum = this.pageNum;
      vm.loading = true;
      if(noneMore){
        vm.loading = false;
        return
      }
      if(!loading){
        let $setTimeout = setTimeout(()=>{
          vm.getList(pageNum, (res) =>{
            var resBody = res.body;
            if(resBody.code=='000'){
              vm.loading = false; 
              if(resBody.data.length == 0){
                vm.noneMore = true;
                clearTimeout($setTimeout);
              }else{
                vm.pageNum = pageNum + 1;
                vm.methodList = vm.methodList.concat(resBody.data);
                vm.methodList.forEach(function(item, index) {
                    item.create_time = dateFormat(item.create_time, 'YYYY-MM-DD')
                })
              }
            }else if(resBody.code == '444'){
                vm.$router.push({path:'/login',query:{history:1}});
            }else{
              if(resBody.mesg){
                MessageBox.alert(resBody.mesg, '提示');
              }
            }
        })
        },1000)
      }else{
      }
    },
    getList(pageNum, cb){
      let vm = this;
      return vm.$http.get('/loansupermarket-pay/order/enchashmentRecord?pageNum='+pageNum+'&pageSize=10&token='+cookie.get('token'))
        .then(res => {
            return cb(res)
        })
        .catch(err=>{
            return cb(err)
        })
    },
    //返回箭头
    iconClick(){
      this.$router.go(-1);
    },
    // 跳转到相应的详情页面
    goDetail(id) {
      this.$router.push({ path: '/main/mine/enchash/chashDetails', query: { order_no: id } });
    },
    //我要取现
    getMoney(){
      this.$router.push({ path: '/main/mine/enchash/getMoney'});
    }
  }
}
</script>
<style lang="scss" scoped>

@import '../../../../scss/variable/base.scss';
.header {
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 1.2rem;
    // background: $primaryColor;
    color: #fff;
    text-align: center;
    font-size: 0.42rem;
    line-height: 1.2rem;
    .icon-qianjin-copy {
        position: absolute;
        left: 0.4rem;
        color: #fff;
    }
    .right{
      position: absolute;
      right: 0.4rem;
      top:0;
      font-size: 0.4rem;
    }
    
}
.method {
  &-content {
    margin-top: 1.2rem;
    background:#f5f5f5;
    &-item{
      background:#fff;
      font-size: 0.32rem;
      margin-bottom: 0.26666rem;
      padding:0 0.5333rem;
      &-top{
        border-bottom: 1px solid #e5e5e5;
        height: 0.93333rem;
        line-height: 0.93333rem;
        &-id{
          float: left;
          color:#959595;
        }
        &-status{
          float: right;
          color:#00dada;
        }
      }
      &-bottom{
        height: 1.6rem;
        line-height: 1.6rem;
        &-money{
          float: left;
          font-size: 0.64rem;
          color: #333;
        }
        &-time{
          float: right;
          color:#959595;
        }
      }
    }
  }
}
.hasNoList{
  img{
    display: block;
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    margin-top: 4rem;
  }
  p{
    margin-top:0.66rem;
    font-size: 0.45rem;
    color: #999;
  }
}
</style>


